<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less"/>
    <link rel="stylesheet/less" href="./less/addBankCard.less"/>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
          <div class="login-top">
            <header class="title">
                <div class="spell">添加银行卡</div>
                <a href="./top_up.html">
                    <img src="./img/arrow_back.png">
                </a>
            </header>
          </div>
          <div class="bankDeposit">
              <ul v-for="(item,index) in bankDeposit">
                <li>{{item.name}}</li>
                <li  @click="bankPicker">
                  <ul>
                    <li>
                      <input type="text" :placeholder="item.place" v-model="bank">
                    </li>
                    <li>
                      <img :src="item.img"/>
                    </li>
                  </ul>
                </li>
              </ul>
          </div>
          <div class="Information">
            <ul>
              <li>银行卡号</li>
              <li>
                <ul>
                  <li>
                    <input type="text" placeholder="请输入银行卡的卡号" v-model="userBankCard">
                  </li>
                  <li></li>
                </ul>
              </li>
            </ul>
            <ul>
              <li>持卡人姓名</li>
              <li>
                <ul>
                  <li>
                    <input type="text" placeholder="请输入持卡人的姓名" v-model="userName">
                  </li>
                  <li></li>
                </ul>
              </li>
            </ul>
            <ul>
              <li>身份证号</li>
              <li>
                <ul>
                  <li>
                    <input type="text" placeholder="请输入您的身份证号" v-model="userId">
                  </li>
                  <li></li>
                </ul>
              </li>
            </ul>
            <ul>
              <li>预留手机号</li>
              <li>
                <ul>
                  <li>
                    <input type="text" placeholder="请输入您的银行预留手机号" v-model="userPhone">
                  </li>
                  <li></li>
                </ul>
              </li>
            </ul>
            <ul>
              <li>验证码</li>
              <li>
                <ul>
                  <li>
                    <input type="text" placeholder="请输入您的验证码" v-model="userCode">
                  </li>
                  <li v-show="show" @click="getCode">发送验证码</li>
                  <li v-show="!show">{{count}}s</li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="immediately" @click="addBankCard">立即添加</div>
          <div id="toast" v-show="totasStatus">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content">登录成功</p>
            </div>
        </div>
        <div id="textToast" v-show="tooltip">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast weui-toast_text">
                <p class="weui-toast__content">{{tooltipName}}</p>
            </div>
        </div>
        </div>
    </div>
</body>
</html>
<script type="module">
  import {bankCardList, bankCardCode, addBankCard} from './js/request/api.js';
   import { shareLink } from './js/public.js';
   Vue.prototype.public = {shareLink};
    let app = new Vue({
        el: '#app',
        data: {
          bankDeposit:[
            {
              name: '开户银行',
              place: '请选择您的开户银行',
              img: './img/triangle.png',
            }
          ],
          userBankName: '',
          userBankCard: '',
          userName: '',
          userId: '',
          userPhone: '',
          userCode: '',
          show: true,
          count: '',
          mchOrderNo: '',
          bankId: '',
          bank: '',
          bankAddress: '',
          bankCard: [],
          tooltip: false,
          totasStatus: false,
          tooltipName: '',
        },
        mounted(){
            let that = this;
                that.bankCardList();
                that.public.shareLink();
        },
        methods:{


          bankPicker(){
            let that = this;
              weui.picker(that.bankCard, {
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                  console.log(result[0].bankId);
                  that.bankId = result[0].bankId;
                  that.bank = result[0].label;
                }
            });
          },


          bankCardList(){
              let that = this;

              bankCardList({
                type: 1
              }).then(res=>{
                console.log(res);
                let bankList = res.data.map((item,index)=>{
                  return {
                      label: item.bankName,
                      bankId: item.bankId,
                      value: index
                    }
                })
                that.bankCard = bankList;
              }).catch(error=>{
                console.log(error);
              })
          },


          getCode(){
            let that = this;
            let userData = JSON.parse(localStorage.getItem("userData"));

            if(that.bank == ''){
                that.tooltip = true;
                that.tooltipName = '开户银行不能为空';  
                setTimeout(()=>{
                    that.tooltip = false;
                },2000)
                return false;
              }else if(that.userBankCard == ''){
                that.tooltip = true;
                that.tooltipName = '银行卡号不能为空';  
                setTimeout(()=>{
                    that.tooltip = false;
                },2000)
                return false;
              }else if(that.userName == ''){
                that.tooltip = true;
                that.tooltipName = '持卡人姓名不能为空';  
                setTimeout(()=>{
                    that.tooltip = false;
                },2000)
                return false;
              }else if(that.userId == ''){
                that.tooltip = true;
                that.tooltipName = '身份证号不能为空';  
                setTimeout(()=>{
                    that.tooltip = false;
                },2000)
                return false;
              }else if(that.userPhone == ''){
                  that.tooltip = true;
                  that.tooltipName = '手机号不能为空';  
                  setTimeout(()=>{
                      that.tooltip = false;
                  },2000)
                  return false;
              }else if(!(/^1[3|4|5|7|8|9]\d{9}$/.test(that.userPhone))){ 
                  that.tooltip = true;
                  that.tooltipName = '手机号输入错误';  
                  setTimeout(()=>{
                      that.tooltip = false;
                  },2000)
                  return false; 
              }else{
                const TIME_COUNT = 60;
                if (!that.timer) {
                    that.count = TIME_COUNT;
                    that.show = false;
                    that.timer = setInterval(() => {
                    if (that.count > 0 && that.count <= TIME_COUNT) {
                        that.count--;
                        } else {
                        that.show = true;
                        clearInterval(that.timer);
                        that.timer = null;
                        }
                    }, 1000)
                }

                bankCardCode({
                  userId: userData.userId,
                  bankId: that.bankId,
                  payerName: that.userName,
                  idNo: that.userId,
                  bankCardNo: that.userBankCard,
                  mobileNo: that.userPhone,
                }).then(res=>{
                  that.tooltip = true;
                  that.tooltipName = res.msg;  
                  setTimeout(()=>{
                      that.tooltip = false;
                  },2000)
                  that.mchOrderNo = res.data.mchOrderNo;
                }).catch(error=>{
                  console.log(error);
                })
              }
          },

          addBankCard(){
            let that = this;
            addBankCard({
              smsCode: that.userCode,
              mchOrderNo: that.mchOrderNo
            }).then(res=>{
              console.log(res);
                that.tooltip = true;
                that.tooltipName = res.msg;  
                setTimeout(()=>{
                    that.tooltip = false;
                },2000)
              if(res.code == 0){
                that.tooltip = true;
                that.tooltipName = res.msg;  
                setTimeout(()=>{
                    that.tooltip = false;
                },2000)
                let url = "./top_up.html";
                    window.location.href = url;
              }
            }).catch(error=>{
              console.log(error);
            })
          },

          shareLink(){
            
            shareLink({
                url: location.href
            }).then(res=>{
                console.log(res);
            }).catch(error=>{
                console.log(error);
            })
          }
        },
    })
</script>